<template>
    <el-sub-menu :index="menu.path" v-if="menu.children && menu.length !== 0" :key="menu.path">
        <template #title>
            <svg class="icon" aria-hidden="true" style="margin-right: 10px">-->
                <use :xlink:href="menu.icon"></use>
            </svg>
            <span>{{ menu.name }}</span>
        </template>
        <!-- 多级嵌套菜单渲染 -->
        <sub-menu :menu="menuItem" v-for="menuItem in menu.children" :key="menuItem.path"/>
    </el-sub-menu>
    <el-menu-item :index="menu.path" v-else :key="menu.path">
        <svg class="icon" aria-hidden="true" style="margin-right: 10px">-->
            <use :xlink:href="menu.icon"></use>
        </svg>
        <span>{{menu.name}}</span>
    </el-menu-item>
</template>

<script>

export default {
    name: 'sub-menu',
    props:{
        menu: null
    },
    setup(){
    }
}
</script>